<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
    <head>
        <header th:include="public/common::common_css"></header>
    </head>

    <body>
        <button class="btn">测试bootstrap</button>

        <table class="table">
            <thead>
                <tr>
                    <th>name</th>
                    <th>age</th>
                    <th>sex</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>

        <ul class="pagination"></ul>

        <footer th:include="public/common::common_js"></footer>

        <!--分页demo-->
        <!--1.引入js-->
        <paginator th:include="public/common::paginator"></paginator>
        <script>
            $(function () {
                var pageSize = 12;
                var pageNum = 1;
                var param = {
                    pageNum:pageNum,pageSize:pageSize
                };
                $.ajax(
                    {
                        url:'/webapps/admin/testPage',
                        type:'POST',
                        data:param,
                        success:function (data) {
                            console.log(data);
                            data = JSON.parse(data);
                            var currentPage=pageNum;
                            var totalPages=Math.ceil(data.total/pageSize);

                            //拼装html
                            var arr = data["arr"];
                            buildTables(arr);

                            //创建分页对象
                            //分页对象有两种创建方式
                            //1.使用自定义options(options里面的各项需要自己定义好)
                            //1.1 拼装options
                            // let options = buildOptions(currentPage, totalPages);
                            // let paginatorObj = new Paginator(options);

                            //2.使用默认options，但是需要传递totalPages(总页数), currentPage(当前页，默认为1), pageClickedFunction（页码点击需要执行的函数）
                            var paginatorObj = new Paginator(totalPages, currentPage, function (event, originalEvent, type, page) {
                                //2.1 重新获取分页数据
                                getPaginatorData(page);
                            });
                            paginatorObj.initPaginator($(".pagination"));
                        }
                    }
                )
            });

            /**
             * 分页options的组建
             * @param currentPage 当前页
             * @param totalPages 总页数
             * @returns {{currentPage: *, totalPages: *, numberOfPages: number, bootstrapMajorVersion: number, useBootstrapTooltip: boolean, itemTexts: itemTexts, onPageClicked: onPageClicked}}
             */
            function buildOptions(currentPage, totalPages) {
                var options = {
                    currentPage: currentPage, //当前页
                    totalPages: totalPages, //总页数
                    numberOfPages: 5, //设置控件显示的页码数
                    bootstrapMajorVersion: 3,//如果是bootstrap3版本需要加此标识，并且设置包含分页内容的DOM元素为UL,如果是bootstrap2版本，则DOM包含元素是DIV
                    useBootstrapTooltip: false,//是否显示tip提示框
                    itemTexts:function(type,page, current){//文字翻译
                        switch (type) {
                            case "first":
                                return "首页";
                            case "prev":
                                return "上一页";
                            case "next":
                                return "下一页";
                            case "last":
                                return "尾页";
                            case "page":
                                return page;
                        }
                    },
                    onPageClicked: function (event, originalEvent, type, page) {
                        getPaginatorData(page);
                    }
                }

                return options;
            }

            /**
             * 拼装表格数据
             * @param arr
             */
            function buildTables(arr) {
                var tbody = $("table tbody");
                //拼装数据
                tbody.html("");
                $.each(arr, function(i, obj) {
                    var tr = $("<tr></tr>");
                    var nameTd = $("<td></td>");
                    var ageTd = $("<td></td>");
                    var sexTd = $("<td></td>");

                    nameTd.append(obj["name"]);
                    ageTd.append(obj["age"]);
                    sexTd.append(obj["sex"]);

                    tr.append(nameTd).append(ageTd).append(sexTd);
                    tbody.append(tr);
                });
            }

            /**
             * 获取分页数据
             */
            function getPaginatorData(page) {
                $.ajax({
                    url:"/webapps/admin/testPage", //点击分页提交当前页码
                    type:'POST',
                    data:{pageNum:page,pageSize:12},
                    success:function(data){
                        data = JSON.parse(data);
                        if(data!=null){
                            //DOM操作
                            //拼装html
                            var arr = data["arr"];
                            buildTables(arr);
                        }
                    }
                });
            }
        </script>
    </body>
</html>